<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="售后详情" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		<view class="order-step-two" style="color: #5c8edc;">{{orderInfo.statusDescription}}</view>
		
		<view class="order-step-two" style="margin-top: 15rpx;">
			<view class="goods-item">
				<view style="width: 30%;">
					<image :src="orderInfo.sku.sku_img_url" class="card_img"></image>
				</view>
				
				<view class="med_right">
					<view class="font16">{{orderInfo.goods.name}}</view>
					<view class="font12 text-hind" style="margin-top: 15rpx;">{{orderInfo.sku.sku_name}}</view>
					<view class="flex-row items-center" style="margin-top: 15rpx;">
						<view style="color: #5c8edc;font-size: 30rpx;margin-right: 20rpx;">¥{{orderInfo.order_pay_price}}</view>
						<view class="font12 text-hind">x{{orderInfo.order_number}}</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
		<view class="order-step-two" style="margin-top: 10rpx;">
			<view class="flex-row justify-between items-center">
				<text>售后类型</text>
				<text>{{orderInfo.typeDescription}}</text>
			</view>
			<!-- <view class="line"></view> -->
			<view class="flex-row justify-between items-center">
				<text>售后描述</text>
				<text>{{orderInfo.aftersale_reason}}</text>
			</view>
			<!-- <view class="line"></view> -->
		</view>
		
		<view class="order-step-two" style="margin-top: 10rpx;">
			<view class="flex-col">
				<text>售后原因</text>
				<text style="margin-top: 15rpx;">{{orderInfo.description}}</text>
				<image @click="clickImg(orderInfo.pics)" :src="orderInfo.pics" style="width: 300rpx;height: 300rpx;margin-top: 10rpx;border-radius: 8rpx;"></image>
			</view>
			
		</view>
		
		<view class="order-step-two" style="margin-top: 10rpx;">
			<view class="flex-col">
				<text>商家回复</text>
				<text style="margin-top: 15rpx;">{{orderInfo.reply ? orderInfo.reply :'暂无'}}</text>
			</view>
		</view>
		
		
		<view v-if="orderInfo.status == 4" class="bottom-lay">
			<view @click="goReturn" class="btm1">
				去回寄
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				orderInfo:{}
			};
		},
		onLoad(op) {
			this.id = op.id;
			
		},
		onShow() {
			this.getAfterDetail();
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		methods:{
			goReturn(){
				uni.navigateTo({
					url:'/pages/after_sales/return_after?id=' + this.orderInfo.aftersale_id
				})
			},
			
			clickImg(url){
				uni.previewImage({
					urls:[url],
				})
			},
			getAfterDetail(){
				this.$request({
					url:'?c=Aftersales&a=aftersalesDetails',
					type:'post',
					data:{
						aftersale_id:this.id
					}
				}).then(res =>{
					console.log(res)
					this.orderInfo = res.data;
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
}
.order-step-two{
	background-color: #fff;
	margin-left: 15rpx;
	margin-right: 15rpx;
	padding: 20rpx;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	font-size: 26rpx;
}
.goods-item{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 15rpx;
	padding: 15rpx 20rpx;
}
.card_img {
	height: 180rpx;
	width: 180rpx;
	border-radius: 10rpx;
}
.med_right {
	// height: 180rpx;
	margin-left: 20rpx;
	width: 70%;
	
}
.text-hind {
	color: #909090;
	// margin-top: 15rpx;
}
.font12{
	font-size: 25rpx;
}
.font16{
	font-size: 30rpx;
}
.line{
	border: 1px solid #f5f5f5;
	margin-top: 25rpx;
}
.bottom-lay{
	position: fixed;
	left: 0;
	bottom: 0;
	height: 100rpx;
	// line-height: 90rpx;
	width: 100%;
	text-align: center;
	background-color: #fff;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20rpx;
	padding-right: 20rpx;
}
.btm1 {
	padding: 6rpx 20rpx;
	background-color: #ffffff;
	color: #5c8edc;
	border: #5c8edc 1rpx solid;
	border-radius: 35rpx;
	font-size: 28rpx;
}
</style>
